<!DOCTYPE html>
<html class="no-js css-menubar" lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
  <meta name="description" content="bootstrap admin template">
  <meta name="author" content="">

  <title>Utilities | Remark Admin Template</title>

  <link rel="apple-touch-icon" href="../assets/images/apple-touch-icon.png">
  <link rel="shortcut icon" href="../assets/images/favicon.ico">

  <!-- Stylesheets -->
  <link rel="stylesheet" href="../../global/css/bootstrap.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/css/bootstrap-extend.min.css?v2.2.0">
  <link rel="stylesheet" href="../assets/css/site.min.css?v2.2.0">

  <!-- Skin tools (demo site only) -->
  <link rel="stylesheet" href="../../global/css/skintools.min.css?v2.2.0">
  <script src="../assets/js/sections/skintools.min.js"></script>

  <!-- Plugins -->
  <link rel="stylesheet" href="../../global/vendor/animsition/animsition.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/vendor/asscrollable/asScrollable.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/vendor/switchery/switchery.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/vendor/intro-js/introjs.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/vendor/slidepanel/slidePanel.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/vendor/flag-icon-css/flag-icon.min.css?v2.2.0">

  <!-- Plugins For This Page -->
  <link rel="stylesheet" href="../../global/vendor/filament-tablesaw/tablesaw.min.css?v2.2.0">

  <!-- Page -->
  <link rel="stylesheet" href="../assets/examples/css/uikit/utilities.min.css?v2.2.0">

  <!-- Fonts -->
  <link rel="stylesheet" href="../../global/fonts/web-icons/web-icons.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/fonts/brand-icons/brand-icons.min.css?v2.2.0">
  <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:300,400,500,300italic'>


  <!--[if lt IE 9]>
    <script src="../../global/vendor/html5shiv/html5shiv.min.js"></script>
    <![endif]-->

  <!--[if lt IE 10]>
    <script src="../../global/vendor/media-match/media.match.min.js"></script>
    <script src="../../global/vendor/respond/respond.min.js"></script>
    <![endif]-->

  <!-- Scripts -->
  <script src="../../global/vendor/modernizr/modernizr.min.js"></script>
  <script src="../../global/vendor/breakpoints/breakpoints.min.js"></script>
  <script>
    Breakpoints();
  </script>
</head>
<body>
  <!--[if lt IE 8]>
        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

  <nav class="site-navbar navbar navbar-default navbar-fixed-top navbar-mega" role="navigation">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle hamburger hamburger-close navbar-toggle-left hided"
      data-toggle="menubar">
        <span class="sr-only">Toggle navigation</span>
        <span class="hamburger-bar"></span>
      </button>
      <button type="button" class="navbar-toggle collapsed" data-target="#site-navbar-collapse"
      data-toggle="collapse">
        <i class="icon wb-more-horizontal" aria-hidden="true"></i>
      </button>
      <div class="navbar-brand navbar-brand-center site-gridmenu-toggle" data-toggle="gridmenu">
        <img class="navbar-brand-logo" src="../assets/images/logo.png" title="Remark">
        <span class="navbar-brand-text hidden-xs"> Remark</span>
      </div>
      <button type="button" class="navbar-toggle collapsed" data-target="#site-navbar-search"
      data-toggle="collapse">
        <span class="sr-only">Toggle Search</span>
        <i class="icon wb-search" aria-hidden="true"></i>
      </button>
    </div>

    <div class="navbar-container container-fluid">
      <!-- Navbar Collapse -->
      <div class="collapse navbar-collapse navbar-collapse-toolbar" id="site-navbar-collapse">
        <!-- Navbar Toolbar -->
        <ul class="nav navbar-toolbar">
          <li class="hidden-float" id="toggleMenubar">
            <a data-toggle="menubar" href="#" role="button">
              <i class="icon hamburger hamburger-arrow-left">
                  <span class="sr-only">Toggle menubar</span>
                  <span class="hamburger-bar"></span>
                </i>
            </a>
          </li>
          <li class="hidden-xs" id="toggleFullscreen">
            <a class="icon icon-fullscreen" data-toggle="fullscreen" href="#" role="button">
              <span class="sr-only">Toggle fullscreen</span>
            </a>
          </li>
          <li class="hidden-float">
            <a class="icon wb-search" data-toggle="collapse" href="#" data-target="#site-navbar-search"
            role="button">
              <span class="sr-only">Toggle Search</span>
            </a>
          </li>
          <li class="dropdown dropdown-fw dropdown-mega">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"
            data-animation="fade" role="button">Mega <i class="icon wb-chevron-down-mini" aria-hidden="true"></i></a>
            <ul class="dropdown-menu" role="menu">
              <li role="presentation">
                <div class="mega-content">
                  <div class="row">
                    <div class="col-sm-4">
                      <h5>UI Kit</h5>
                      <ul class="blocks-2">
                        <li class="mega-menu margin-0">
                          <ul class="list-icons">
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="../advanced/animation.html">Animation</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="buttons.html">Buttons</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="colors.html">Colors</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="dropdowns.html">Dropdowns</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="icons.html">Icons</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="../advanced/lightbox.html">Lightbox</a>
                            </li>
                          </ul>
                        </li>
                        <li class="mega-menu margin-0">
                          <ul class="list-icons">
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="modals.html">Modals</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="panel-structure.html">Panels</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="../structure/overlay.html">Overlay</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="tooltip-popover.html ">Tooltips</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="../advanced/scrollable.html">Scrollable</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="typography.html">Typography</a>
                            </li>
                          </ul>
                        </li>
                      </ul>
                    </div>
                    <div class="col-sm-4">
                      <h5>Media
                        <span class="badge badge-success">4</span>
                      </h5>
                      <ul class="blocks-3">
                        <li>
                          <a class="thumbnail margin-0" href="javascript:void(0)">
                            <img class="width-full" src="../../global/photos/view-1-150x100.jpg" alt="..."
                            />
                          </a>
                        </li>
                        <li>
                          <a class="thumbnail margin-0" href="javascript:void(0)">
                            <img class="width-full" src="../../global/photos/view-2-150x100.jpg" alt="..."
                            />
                          </a>
                        </li>
                        <li>
                          <a class="thumbnail margin-0" href="javascript:void(0)">
                            <img class="width-full" src="../../global/photos/view-3-150x100.jpg" alt="..."
                            />
                          </a>
                        </li>
                        <li>
                          <a class="thumbnail margin-0" href="javascript:void(0)">
                            <img class="width-full" src="../../global/photos/view-4-150x100.jpg" alt="..."
                            />
                          </a>
                        </li>
                        <li>
                          <a class="thumbnail margin-0" href="javascript:void(0)">
                            <img class="width-full" src="../../global/photos/view-5-150x100.jpg" alt="..."
                            />
                          </a>
                        </li>
                        <li>
                          <a class="thumbnail margin-0" href="javascript:void(0)">
                            <img class="width-full" src="../../global/photos/view-6-150x100.jpg" alt="..."
                            />
                          </a>
                        </li>
                      </ul>
                    </div>
                    <div class="col-sm-4">
                      <h5 class="margin-bottom-0">Accordion</h5>
                      <!-- Accordion -->
                      <div class="panel-group panel-group-simple" id="siteMegaAccordion" aria-multiselectable="true"
                      role="tablist">
                        <div class="panel">
                          <div class="panel-heading" id="siteMegaAccordionHeadingOne" role="tab">
                            <a class="panel-title" data-toggle="collapse" href="#siteMegaCollapseOne" data-parent="#siteMegaAccordion"
                            aria-expanded="false" aria-controls="siteMegaCollapseOne">
                                Collapsible Group Item #1
                              </a>
                          </div>
                          <div class="panel-collapse collapse" id="siteMegaCollapseOne" aria-labelledby="siteMegaAccordionHeadingOne"
                          role="tabpanel">
                            <div class="panel-body">
                              De moveat laudatur vestra parum doloribus labitur sentire partes, eripuit praesenti
                              congressus ostendit alienae, voluptati ornateque
                              accusamus clamat reperietur convicia albucius.
                            </div>
                          </div>
                        </div>
                        <div class="panel">
                          <div class="panel-heading" id="siteMegaAccordionHeadingTwo" role="tab">
                            <a class="panel-title collapsed" data-toggle="collapse" href="#siteMegaCollapseTwo"
                            data-parent="#siteMegaAccordion" aria-expanded="false"
                            aria-controls="siteMegaCollapseTwo">
                                Collapsible Group Item #2
                              </a>
                          </div>
                          <div class="panel-collapse collapse" id="siteMegaCollapseTwo" aria-labelledby="siteMegaAccordionHeadingTwo"
                          role="tabpanel">
                            <div class="panel-body">
                              Praestabiliorem. Pellat excruciant legantur ullum leniter vacare foris voluptate
                              loco ignavi, credo videretur multoque choro fatemur
                              mortis animus adoptionem, bello statuat expediunt
                              naturales.
                            </div>
                          </div>
                        </div>

                        <div class="panel">
                          <div class="panel-heading" id="siteMegaAccordionHeadingThree" role="tab">
                            <a class="panel-title collapsed" data-toggle="collapse" href="#siteMegaCollapseThree"
                            data-parent="#siteMegaAccordion" aria-expanded="false"
                            aria-controls="siteMegaCollapseThree">
                                Collapsible Group Item #3
                              </a>
                          </div>
                          <div class="panel-collapse collapse" id="siteMegaCollapseThree" aria-labelledby="siteMegaAccordionHeadingThree"
                          role="tabpanel">
                            <div class="panel-body">
                              Horum, antiquitate perciperet d conspectum locus obruamus animumque perspici probabis
                              suscipere. Desiderat magnum, contenta poena desiderant
                              concederetur menandri damna disputandum corporum.
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End Accordion -->
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
        <!-- End Navbar Toolbar -->

        <!-- Navbar Toolbar Right -->
        <ul class="nav navbar-toolbar navbar-right navbar-toolbar-right">
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)" data-animation="scale-up"
            aria-expanded="false" role="button">
              <span class="flag-icon flag-icon-us"></span>
            </a>
            <ul class="dropdown-menu" role="menu">
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem">
                  <span class="flag-icon flag-icon-gb"></span> English</a>
              </li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem">
                  <span class="flag-icon flag-icon-fr"></span> French</a>
              </li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem">
                  <span class="flag-icon flag-icon-cn"></span> Chinese</a>
              </li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem">
                  <span class="flag-icon flag-icon-de"></span> German</a>
              </li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem">
                  <span class="flag-icon flag-icon-nl"></span> Dutch</a>
              </li>
            </ul>
          </li>
          <li class="dropdown">
            <a class="navbar-avatar dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"
            data-animation="scale-up" role="button">
              <span class="avatar avatar-online">
                <img src="../../global/portraits/5.jpg" alt="...">
                <i></i>
              </span>
            </a>
            <ul class="dropdown-menu" role="menu">
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem"><i class="icon wb-user" aria-hidden="true"></i> Profile</a>
              </li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem"><i class="icon wb-payment" aria-hidden="true"></i> Billing</a>
              </li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem"><i class="icon wb-settings" aria-hidden="true"></i> Settings</a>
              </li>
              <li class="divider" role="presentation"></li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem"><i class="icon wb-power" aria-hidden="true"></i> Logout</a>
              </li>
            </ul>
          </li>
          <li class="dropdown">
            <a data-toggle="dropdown" href="javascript:void(0)" title="Notifications" aria-expanded="false"
            data-animation="scale-up" role="button">
              <i class="icon wb-bell" aria-hidden="true"></i>
              <span class="badge badge-danger up">5</span>
            </a>
            <ul class="dropdown-menu dropdown-menu-right dropdown-menu-media" role="menu">
              <li class="dropdown-menu-header" role="presentation">
                <h5>NOTIFICATIONS</h5>
                <span class="label label-round label-danger">New 5</span>
              </li>

              <li class="list-group" role="presentation">
                <div data-role="container">
                  <div data-role="content">
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <i class="icon wb-order bg-red-600 white icon-circle" aria-hidden="true"></i>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">A new order has been placed</h6>
                          <time class="media-meta" datetime="2016-06-12T20:50:48+08:00">5 hours ago</time>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <i class="icon wb-user bg-green-600 white icon-circle" aria-hidden="true"></i>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Completed the task</h6>
                          <time class="media-meta" datetime="2016-06-11T18:29:20+08:00">2 days ago</time>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <i class="icon wb-settings bg-red-600 white icon-circle" aria-hidden="true"></i>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Settings updated</h6>
                          <time class="media-meta" datetime="2016-06-11T14:05:00+08:00">2 days ago</time>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <i class="icon wb-calendar bg-blue-600 white icon-circle" aria-hidden="true"></i>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Event started</h6>
                          <time class="media-meta" datetime="2016-06-10T13:50:18+08:00">3 days ago</time>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <i class="icon wb-chat bg-orange-600 white icon-circle" aria-hidden="true"></i>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Message received</h6>
                          <time class="media-meta" datetime="2016-06-10T12:34:48+08:00">3 days ago</time>
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
              <li class="dropdown-menu-footer" role="presentation">
                <a class="dropdown-menu-footer-btn" href="javascript:void(0)" role="button">
                  <i class="icon wb-settings" aria-hidden="true"></i>
                </a>
                <a href="javascript:void(0)" role="menuitem">
                    All notifications
                  </a>
              </li>
            </ul>
          </li>
          <li class="dropdown">
            <a data-toggle="dropdown" href="javascript:void(0)" title="Messages" aria-expanded="false"
            data-animation="scale-up" role="button">
              <i class="icon wb-envelope" aria-hidden="true"></i>
              <span class="badge badge-info up">3</span>
            </a>
            <ul class="dropdown-menu dropdown-menu-right dropdown-menu-media" role="menu">
              <li class="dropdown-menu-header" role="presentation">
                <h5>MESSAGES</h5>
                <span class="label label-round label-info">New 3</span>
              </li>

              <li class="list-group" role="presentation">
                <div data-role="container">
                  <div data-role="content">
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-online">
                            <img src="../../global/portraits/2.jpg" alt="..." />
                            <i></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Mary Adams</h6>
                          <div class="media-meta">
                            <time datetime="2016-06-17T20:22:05+08:00">30 minutes ago</time>
                          </div>
                          <div class="media-detail">Anyways, i would like just do it</div>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-off">
                            <img src="../../global/portraits/3.jpg" alt="..." />
                            <i></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Caleb Richards</h6>
                          <div class="media-meta">
                            <time datetime="2016-06-17T12:30:30+08:00">12 hours ago</time>
                          </div>
                          <div class="media-detail">I checheck the document. But there seems</div>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-busy">
                            <img src="../../global/portraits/4.jpg" alt="..." />
                            <i></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">June Lane</h6>
                          <div class="media-meta">
                            <time datetime="2016-06-16T18:38:40+08:00">2 days ago</time>
                          </div>
                          <div class="media-detail">Lorem ipsum Id consectetur et minim</div>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-away">
                            <img src="../../global/portraits/5.jpg" alt="..." />
                            <i></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Edward Fletcher</h6>
                          <div class="media-meta">
                            <time datetime="2016-06-15T20:34:48+08:00">3 days ago</time>
                          </div>
                          <div class="media-detail">Dolor et irure cupidatat commodo nostrud nostrud.</div>
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
              <li class="dropdown-menu-footer" role="presentation">
                <a class="dropdown-menu-footer-btn" href="javascript:void(0)" role="button">
                  <i class="icon wb-settings" aria-hidden="true"></i>
                </a>
                <a href="javascript:void(0)" role="menuitem">
                    See all messages
                  </a>
              </li>
            </ul>
          </li>
          <li id="toggleChat">
            <a data-toggle="site-sidebar" href="javascript:void(0)" title="Chat" data-url="../site-sidebar.tpl">
              <i class="icon wb-chat" aria-hidden="true"></i>
            </a>
          </li>
        </ul>
        <!-- End Navbar Toolbar Right -->
      </div>
      <!-- End Navbar Collapse -->

      <!-- Site Navbar Seach -->
      <div class="collapse navbar-search-overlap" id="site-navbar-search">
        <form role="search">
          <div class="form-group">
            <div class="input-search">
              <i class="input-search-icon wb-search" aria-hidden="true"></i>
              <input type="text" class="form-control" name="site-search" placeholder="Search...">
              <button type="button" class="input-search-close icon wb-close" data-target="#site-navbar-search"
              data-toggle="collapse" aria-label="Close"></button>
            </div>
          </div>
        </form>
      </div>
      <!-- End Site Navbar Seach -->
    </div>
  </nav>
  <div class="site-menubar">
    <div class="site-menubar-body">
      <div>
        <div>
          <ul class="site-menu">
            <li class="site-menu-category">General</li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-dashboard" aria-hidden="true"></i>
                <span class="site-menu-title">Dashboard</span>
                <div class="site-menu-badge">
                  <span class="badge badge-success">3</span>
                </div>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../index.html">
                    <span class="site-menu-title">Dashboard v1</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../dashboard/v2.html">
                    <span class="site-menu-title">Dashboard v2</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../dashboard/ecommerce.html">
                    <span class="site-menu-title">Ecommerce</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../dashboard/analytics.html">
                    <span class="site-menu-title">Analytics</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../dashboard/team.html">
                    <span class="site-menu-title">Team</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-layout" aria-hidden="true"></i>
                <span class="site-menu-title">Layouts</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/menu-collapsed.html">
                    <span class="site-menu-title">Menu Collapsed</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/menu-collapsed-alt.html">
                    <span class="site-menu-title">Menu Collapsed Alt</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/menu-expended.html">
                    <span class="site-menu-title">Menu Expended</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/grids.html">
                    <span class="site-menu-title">Grid Scaffolding</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/layout-grid.html">
                    <span class="site-menu-title">Layout Grid</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/headers.html">
                    <span class="site-menu-title">Different Headers</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/panel-transition.html">
                    <span class="site-menu-title">Panel Transition</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/boxed.html">
                    <span class="site-menu-title">Boxed Layout</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/two-columns.html">
                    <span class="site-menu-title">Two Columns</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/menubar-flipped.html">
                    <span class="site-menu-title">Menubar Flipped</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/menubar-native-scrolling.html">
                    <span class="site-menu-title">Menubar Native Scrolling</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/bordered-header.html">
                    <span class="site-menu-title">Bordered Header</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/page-aside-fixed.html">
                    <span class="site-menu-title">Page Aside Fixed</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-file" aria-hidden="true"></i>
                <span class="site-menu-title">Pages</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item has-sub">
                  <a href="javascript:void(0)">
                    <span class="site-menu-title">Errors</span>
                    <span class="site-menu-arrow"></span>
                  </a>
                  <ul class="site-menu-sub">
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../pages/error-400.html">
                        <span class="site-menu-title">400</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../pages/error-403.html">
                        <span class="site-menu-title">403</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../pages/error-404.html">
                        <span class="site-menu-title">404</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../pages/error-500.html">
                        <span class="site-menu-title">500</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../pages/error-503.html">
                        <span class="site-menu-title">503</span>
                      </a>
                    </li>
                  </ul>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/faq.html">
                    <span class="site-menu-title">FAQ</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/gallery.html">
                    <span class="site-menu-title">Gallery</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/gallery-grid.html">
                    <span class="site-menu-title">Gallery Grid</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/search-result.html">
                    <span class="site-menu-title">Search Result</span>
                  </a>
                </li>
                <li class="site-menu-item has-sub">
                  <a href="javascript:void(0)">
                    <span class="site-menu-title">Maps</span>
                    <span class="site-menu-arrow"></span>
                  </a>
                  <ul class="site-menu-sub">
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../pages/map-google.html">
                        <span class="site-menu-title">Google Maps</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../pages/map-vector.html">
                        <span class="site-menu-title">Vector Maps</span>
                      </a>
                    </li>
                  </ul>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/maintenance.html">
                    <span class="site-menu-title">Maintenance</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/forgot-password.html">
                    <span class="site-menu-title">Forgot Password</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/lockscreen.html">
                    <span class="site-menu-title">Lockscreen</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/login.html">
                    <span class="site-menu-title">Login</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/register.html">
                    <span class="site-menu-title">Register</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/login-v2.html">
                    <span class="site-menu-title">Login V2</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/register-v2.html">
                    <span class="site-menu-title">Register V2</span>
                    <div class="site-menu-label">
                      <span class="label label-info label-round">new</span>
                    </div>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/login-v3.html">
                    <span class="site-menu-title">Login V3</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/register-v3.html">
                    <span class="site-menu-title">Register V3</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/user.html">
                    <span class="site-menu-title">User List</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/invoice.html">
                    <span class="site-menu-title">Invoice</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/blank.html">
                    <span class="site-menu-title">Blank Page</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/email.html">
                    <span class="site-menu-title">Email</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/code-editor.html">
                    <span class="site-menu-title">Code Editor</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/profile.html">
                    <span class="site-menu-title">Profile</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/site-map.html">
                    <span class="site-menu-title">Sitemap</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-category">Elements</li>
            <li class="site-menu-item has-sub active open">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-bookmark" aria-hidden="true"></i>
                <span class="site-menu-title">Basic UI</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item has-sub">
                  <a href="javascript:void(0)">
                    <span class="site-menu-title">Panel</span>
                    <span class="site-menu-arrow"></span>
                  </a>
                  <ul class="site-menu-sub">
                    <li class="site-menu-item">
                      <a class="animsition-link" href="panel-structure.html">
                        <span class="site-menu-title">Panel Structure</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="panel-actions.html">
                        <span class="site-menu-title">Panel Actions</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="panel-portlets.html">
                        <span class="site-menu-title">Panel Portlets</span>
                      </a>
                    </li>
                  </ul>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="buttons.html">
                    <span class="site-menu-title">Buttons</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="dropdowns.html">
                    <span class="site-menu-title">Dropdowns</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="icons.html">
                    <span class="site-menu-title">Icons</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="list.html">
                    <span class="site-menu-title">List</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="tooltip-popover.html">
                    <span class="site-menu-title">Tooltip &amp; Popover</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="modals.html">
                    <span class="site-menu-title">Modals</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="tabs-accordions.html">
                    <span class="site-menu-title">Tabs &amp; Accordions</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="images.html">
                    <span class="site-menu-title">Images</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="badges-labels.html">
                    <span class="site-menu-title">Badges &amp; Labels</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="progress-bars.html">
                    <span class="site-menu-title">Progress Bars</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="carousel.html">
                    <span class="site-menu-title">Carousel</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="typography.html">
                    <span class="site-menu-title">Typography</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="colors.html">
                    <span class="site-menu-title">Colors</span>
                  </a>
                </li>
                <li class="site-menu-item active">
                  <a class="animsition-link" href="utilities.html">
                    <span class="site-menu-title">Utilties</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-hammer" aria-hidden="true"></i>
                <span class="site-menu-title">Advanced UI</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item hidden-xs site-tour-trigger">
                  <a href="javascript:void(0)">
                    <span class="site-menu-title">Tour</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/animation.html">
                    <span class="site-menu-title">Animation</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/highlight.html">
                    <span class="site-menu-title">Highlight</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/lightbox.html">
                    <span class="site-menu-title">Lightbox</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/scrollable.html">
                    <span class="site-menu-title">Scrollable</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/rating.html">
                    <span class="site-menu-title">Rating</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/context-menu.html">
                    <span class="site-menu-title">Context Menu</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/alertify.html">
                    <span class="site-menu-title">Alertify</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/masonry.html">
                    <span class="site-menu-title">Masonry</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/treeview.html">
                    <span class="site-menu-title">Treeview</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/toastr.html">
                    <span class="site-menu-title">Toastr</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/maps-vector.html">
                    <span class="site-menu-title">Vector Maps</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/maps-google.html">
                    <span class="site-menu-title">Google Maps</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/sortable-nestable.html">
                    <span class="site-menu-title">Sortable &amp; Nestable</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/bootbox-sweetalert.html">
                    <span class="site-menu-title">Bootbox &amp; Sweetalert</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-plugin" aria-hidden="true"></i>
                <span class="site-menu-title">Structure</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/alerts.html">
                    <span class="site-menu-title">Alerts</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/ribbon.html">
                    <span class="site-menu-title">Ribbon</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/pricing-tables.html">
                    <span class="site-menu-title">Pricing Tables</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/overlay.html">
                    <span class="site-menu-title">Overlay</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/cover.html">
                    <span class="site-menu-title">Cover</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/timeline-simple.html">
                    <span class="site-menu-title">Simple Timeline</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/timeline.html">
                    <span class="site-menu-title">Timeline</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/step.html">
                    <span class="site-menu-title">Step</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/comments.html">
                    <span class="site-menu-title">Comments</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/media.html">
                    <span class="site-menu-title">Media</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/chat.html">
                    <span class="site-menu-title">Chat</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/testimonials.html">
                    <span class="site-menu-title">Testimonials</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/nav.html">
                    <span class="site-menu-title">Nav</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/navbars.html">
                    <span class="site-menu-title">Navbars</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/blockquotes.html">
                    <span class="site-menu-title">Blockquotes</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/pagination.html">
                    <span class="site-menu-title">Pagination</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/breadcrumbs.html">
                    <span class="site-menu-title">Breadcrumbs</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-extension" aria-hidden="true"></i>
                <span class="site-menu-title">Widgets</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../widgets/statistics.html">
                    <span class="site-menu-title">Statistics Widgets</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../widgets/data.html">
                    <span class="site-menu-title">Data Widgets</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../widgets/blog.html">
                    <span class="site-menu-title">Blog Widgets</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../widgets/chart.html">
                    <span class="site-menu-title">Chart Widgets</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../widgets/social.html">
                    <span class="site-menu-title">Social Widgets</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../widgets/weather.html">
                    <span class="site-menu-title">Weather Widgets</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-library" aria-hidden="true"></i>
                <span class="site-menu-title">Forms</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/general.html">
                    <span class="site-menu-title">General Elements</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/material.html">
                    <span class="site-menu-title">Material Elements</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/advanced.html">
                    <span class="site-menu-title">Advanced Elements</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/layouts.html">
                    <span class="site-menu-title">Form Layouts</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/wizard.html">
                    <span class="site-menu-title">Form Wizard</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/validation.html">
                    <span class="site-menu-title">Form Validation</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/masks.html">
                    <span class="site-menu-title">Form Masks</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/editable.html">
                    <span class="site-menu-title">Form Editable</span>
                  </a>
                </li>
                <li class="site-menu-item has-sub">
                  <a href="javascript:void(0)">
                    <span class="site-menu-title">Editors</span>
                    <span class="site-menu-arrow"></span>
                  </a>
                  <ul class="site-menu-sub">
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../forms/editor-summernote.html">
                        <span class="site-menu-title">Summernote</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../forms/editor-markdown.html">
                        <span class="site-menu-title">Markdown</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../forms/editor-ace.html">
                        <span class="site-menu-title">Ace Editor</span>
                      </a>
                    </li>
                  </ul>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/image-cropping.html">
                    <span class="site-menu-title">Image Cropping</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/file-uploads.html">
                    <span class="site-menu-title">File Uploads</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-table" aria-hidden="true"></i>
                <span class="site-menu-title">Tables</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/basic.html">
                    <span class="site-menu-title">Basic Tables</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/bootstrap.html">
                    <span class="site-menu-title">Bootstrap Tables</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/floatthead.html">
                    <span class="site-menu-title">floatThead</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/responsive.html">
                    <span class="site-menu-title">Responsive Tables</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/editable.html">
                    <span class="site-menu-title">Editable Tables</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/jsgrid.html">
                    <span class="site-menu-title">jsGrid</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/footable.html">
                    <span class="site-menu-title">FooTable</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/datatable.html">
                    <span class="site-menu-title">DataTables</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-pie-chart" aria-hidden="true"></i>
                <span class="site-menu-title">Chart</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/chartjs.html">
                    <span class="site-menu-title">Chart.js</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/gauges.html">
                    <span class="site-menu-title">Gauges</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/flot.html">
                    <span class="site-menu-title">Flot</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/peity.html">
                    <span class="site-menu-title">Peity</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/sparkline.html">
                    <span class="site-menu-title">Sparkline</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/morris.html">
                    <span class="site-menu-title">Morris</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/chartist.html">
                    <span class="site-menu-title">Chartist.js</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/rickshaw.html">
                    <span class="site-menu-title">Rickshaw</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/pie-progress.html">
                    <span class="site-menu-title">Pie Progress</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/c3.html">
                    <span class="site-menu-title">C3</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-category">Apps</li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-grid-4" aria-hidden="true"></i>
                <span class="site-menu-title">Apps</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/contacts/contacts.html">
                    <span class="site-menu-title">Contacts</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/calendar/calendar.html">
                    <span class="site-menu-title">Calendar</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/notebook/notebook.html">
                    <span class="site-menu-title">Notebook</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/taskboard/taskboard.html">
                    <span class="site-menu-title">Taskboard</span>
                  </a>
                </li>
                <li class="site-menu-item has-sub">
                  <a href="javascript:void(0)">
                    <span class="site-menu-title">Documents</span>
                    <span class="site-menu-arrow"></span>
                  </a>
                  <ul class="site-menu-sub">
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../apps/documents/articles.html">
                        <span class="site-menu-title">Articles</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../apps/documents/categories.html">
                        <span class="site-menu-title">Categories</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../apps/documents/article.html">
                        <span class="site-menu-title">Article</span>
                      </a>
                    </li>
                  </ul>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/forum/forum.html">
                    <span class="site-menu-title">Forum</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/message/message.html">
                    <span class="site-menu-title">Message</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/projects/projects.html">
                    <span class="site-menu-title">Projects</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/mailbox/mailbox.html">
                    <span class="site-menu-title">Mailbox</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/media/overview.html">
                    <span class="site-menu-title">Media</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/work/work.html">
                    <span class="site-menu-title">Work</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/location/location.html">
                    <span class="site-menu-title">Location</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-category">Angular UI</li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../angular/index.html">
                <i class="site-menu-icon bd-angular" aria-hidden="true"></i>
                <span class="site-menu-title">Angular UI</span>
                <div class="site-menu-label">
                  <span class="label label-danger label-round">new</span>
                </div>
              </a>
            </li>
          </ul>

          <div class="site-menubar-section">
            <h5>
              Milestone
              <span class="pull-right">30%</span>
            </h5>
            <div class="progress progress-xs">
              <div class="progress-bar active" style="width: 30%;" role="progressbar"></div>
            </div>
            <h5>
              Release
              <span class="pull-right">60%</span>
            </h5>
            <div class="progress progress-xs">
              <div class="progress-bar progress-bar-warning" style="width: 60%;" role="progressbar"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="site-menubar-footer">
      <a href="javascript: void(0);" class="fold-show" data-placement="top" data-toggle="tooltip"
      data-original-title="Settings">
        <span class="icon wb-settings" aria-hidden="true"></span>
      </a>
      <a href="javascript: void(0);" data-placement="top" data-toggle="tooltip" data-original-title="Lock">
        <span class="icon wb-eye-close" aria-hidden="true"></span>
      </a>
      <a href="javascript: void(0);" data-placement="top" data-toggle="tooltip" data-original-title="Logout">
        <span class="icon wb-power" aria-hidden="true"></span>
      </a>
    </div>
  </div>
  <div class="site-gridmenu">
    <div>
      <div>
        <ul>
          <li>
            <a href="../apps/mailbox/mailbox.html">
              <i class="icon wb-envelope"></i>
              <span>Mailbox</span>
            </a>
          </li>
          <li>
            <a href="../apps/calendar/calendar.html">
              <i class="icon wb-calendar"></i>
              <span>Calendar</span>
            </a>
          </li>
          <li>
            <a href="../apps/contacts/contacts.html">
              <i class="icon wb-user"></i>
              <span>Contacts</span>
            </a>
          </li>
          <li>
            <a href="../apps/media/overview.html">
              <i class="icon wb-camera"></i>
              <span>Media</span>
            </a>
          </li>
          <li>
            <a href="../apps/documents/categories.html">
              <i class="icon wb-order"></i>
              <span>Documents</span>
            </a>
          </li>
          <li>
            <a href="../apps/projects/projects.html">
              <i class="icon wb-image"></i>
              <span>Project</span>
            </a>
          </li>
          <li>
            <a href="../apps/forum/forum.html">
              <i class="icon wb-chat-group"></i>
              <span>Forum</span>
            </a>
          </li>
          <li>
            <a href="../index.html">
              <i class="icon wb-dashboard"></i>
              <span>Dashboard</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>


  <!-- Page -->
  <div class="page animsition">
    <div class="page-header">
      <ol class="breadcrumb">
        <li><a href="../index.html">Home</a></li>
        <li class="active">Basic UI</li>
      </ol>
      <h1 class="page-title">Utilities</h1>
      <div class="page-header-actions">
        <button type="button" class="btn btn-sm btn-icon btn-inverse btn-round" data-toggle="tooltip"
        data-original-title="Edit">
          <i class="icon wb-pencil" aria-hidden="true"></i>
        </button>
        <button type="button" class="btn btn-sm btn-icon btn-inverse btn-round" data-toggle="tooltip"
        data-original-title="Refresh">
          <i class="icon wb-refresh" aria-hidden="true"></i>
        </button>
        <button type="button" class="btn btn-sm btn-icon btn-inverse btn-round" data-toggle="tooltip"
        data-original-title="Setting">
          <i class="icon wb-settings" aria-hidden="true"></i>
        </button>
      </div>
    </div>
    <div class="page-content">
      <!-- Panel Alignments -->
      <div class="panel">
        <div class="panel-heading">
          <h3 class="panel-title">Alignments</h3>
        </div>
        <div class="panel-body container-fluid">
          <div class="row row-lg">
            <div class="col-lg-6">
              <!-- Example Clearing And Floating -->
              <div class="example-wrap">
                <h4 class="example-title">Clearing And Floating</h4>
                <p>Floating is fundamental for creating all kinds of layouts. But
                  floats need to be cleared or in the worst case, you might end
                  up with a scrambled site. The following classes will help you
                  to setup basic layouts.</p>
                <table class="table table-bordered table-hover">
                  <colgroup>
                    <col class="col-xs-1">
                      <col class="col-xs-7">
                  </colgroup>
                  <thead>
                    <tr>
                      <th class="text-nowrap">Class</th>
                      <th>Description</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td class="text-nowrap">
                        <code>.pull-left</code>
                      </td>
                      <td>Float the element to the left.</td>
                    </tr>
                    <tr>
                      <td class="text-nowrap">
                        <code>.pull-right</code>
                      </td>
                      <td>Float the element to the right.</td>
                    </tr>
                    <tr>
                      <td class="text-nowrap">
                        <code>.clearfix</code>
                      </td>
                      <td>Add this class to a parent container to clear floats.</td>
                    </tr>
                  </tbody>
                </table>

                <div class="example example-box">
                  <button type="button" class="btn btn-default btn-outline">Left</button>
                  <button type="button" class="btn btn-default btn-outline pull-right">Pull right</button>
                </div>
              </div>
              <!-- End Example Clearing And Floating -->
            </div>

            <div class="col-lg-6">
              <!-- Example Vertical Aligns -->
              <div class="example-wrap">
                <h4 class="example-title">Vertical Aligns</h4>
                <div class="example-body">
                  <p>Add one of these classes to change the display properties of
                    an element.</p>
                  <div class="table-responsive">
                    <table class="table table-bordered table-hover">
                      <colgroup>
                        <col class="col-xs-2">
                          <col class="col-xs-6">
                      </colgroup>
                      <thead>
                        <tr>
                          <th class="text-nowrap">Class</th>
                          <th>Description</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td class="text-nowrap">
                            <code>.vertical-align</code>
                          </td>
                          <td>Add this class to the parent container. This container
                            needs a specific height.</td>
                        </tr>
                        <tr>
                          <td class="text-nowrap">
                            <code>.vertical-align-middle</code>
                          </td>
                          <td>Add this class to the child element to center your content.</td>
                        </tr>
                        <tr>
                          <td class="text-nowrap">
                            <code>.vertical-align-bottom</code>
                          </td>
                          <td>Add this class to the child element to align your content
                            to the bottom.</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>

                  <div class="example example-box container-fluid">
                    <div class="row">
                      <div class="col-md-6">
                        <div class="vertical-align height-100">
                          <div class="vertical-align-middle">
                            <button type="button" class="btn btn-default btn-outline">This is align middle</button>
                          </div>
                        </div>
                      </div>
                      <div class="col-md-6">
                        <div class="vertical-align height-100">
                          <div class="vertical-align-bottom">
                            <button type="button" class="btn btn-default btn-outline">This is align bottom</button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- End Example Vertical Aligns -->
            </div>
            <div class="clearfix visible-lg-block"></div>

            <div class="col-lg-6">
              <!-- Example Center Block -->
              <div class="example-wrap">
                <h4 class="example-title">Center Block</h4>
                <div class="example-body">
                  <table class="table table-bordered table-hover">
                    <colgroup>
                      <col class="col-xs-1">
                        <col class="col-xs-7">
                    </colgroup>
                    <thead>
                      <tr>
                        <th class="text-nowrap">Class</th>
                        <th>Description</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td class="text-nowrap">
                          <code>.center-block</code>
                        </td>
                        <td>Use the class to center the element.</td>
                      </tr>
                    </tbody>
                  </table>

                  <div class="example example-box">
                    <button type="button" class="btn btn-default btn-outline center-block">Center</button>
                  </div>
                </div>
              </div>
              <!-- End Example Center Block -->
            </div>
          </div>
        </div>
      </div>
      <!-- End Panel Alignments -->

      <!-- Panel Text Related -->
      <div class="panel">
        <div class="panel-heading">
          <h3 class="panel-title">Text Related</h3>
        </div>
        <div class="panel-body container-fluid">
          <div class="row row-lg">
            <div class="col-lg-6">
              <!-- Example Text Transformation -->
              <div class="example-wrap">
                <h4 class="example-title">Text Transformation</h4>
                <div class="example-body">
                  <p>Transform text in components with text capitalization classes.</p>
                  <div class="table-responsive">
                    <table class="table table-bordered table-hover">
                      <colgroup>
                        <col class="col-xs-2">
                          <col class="col-xs-6">
                      </colgroup>
                      <thead>
                        <tr>
                          <th class="text-nowrap">Class</th>
                          <th>Description</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td class="text-nowrap">
                            <code>.text-lowercase</code>
                          </td>
                          <td>Transform text to lowercase.</td>
                        </tr>
                        <tr>
                          <td class="text-nowrap">
                            <code>.text-uppercase</code>
                          </td>
                          <td>Transform text to uppercase.</td>
                        </tr>
                        <tr>
                          <td class="text-nowrap">
                            <code>.text-capitalize</code>
                          </td>
                          <td>Transform text to capitalize.</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>

                  <div class="example example-box">
                    <p class="text-lowercase">Lowercased text.</p>
                    <p class="text-uppercase">Uppercased text.</p>
                    <p class="text-capitalize">Capitalized text.</p>
                  </div>
                </div>
              </div>
              <!-- End Example Text Transformation -->
            </div>
            <div class="col-lg-6">
              <!-- Example Text Wrapping -->
              <div class="example-wrap">
                <h4 class="example-title">Text Wrapping</h4>
                <div class="example-body">
                  <p>Add one of these classes to wrap the text.</p>
                  <table class="table table-bordered table-hover">
                    <colgroup>
                      <col class="col-xs-1">
                        <col class="col-xs-7">
                    </colgroup>
                    <thead>
                      <tr>
                        <th class="text-nowrap">Class</th>
                        <th>Description</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td class="text-nowrap">
                          <code>.text-hide</code>
                        </td>
                        <td>Replace an element's text content with a background image.</td>
                      </tr>
                      <tr>
                        <td class="text-nowrap">
                          <code>.text-truncate</code>
                        </td>
                        <td>Prevents text from wrapping into multiple lines, truncating
                          it instead.</td>
                      </tr>
                      <tr>
                        <td class="text-nowrap">
                          <code>.text-break</code>
                        </td>
                        <td>Breaks strings if their length exceeds the width of their
                          container.</td>
                      </tr>
                      <tr>
                        <td class="text-nowrap">
                          <code>.text-nowrap</code>
                        </td>
                        <td>Prevents text from wrapping into multiple lines.</td>
                      </tr>
                    </tbody>
                  </table>

                  <div class="example example-box container-fluid">
                    <div class="row">
                      <div class="col-md-3">
                        <div class="text-hide height-100" style="border:1px solid #e6e8ea; background-image: url(../../global/photos/view-1-960x640.jpg)">
                          This is text hide.
                        </div>
                      </div>
                      <div class="col-md-3">
                        <div class="text-truncate height-100" style="border:1px solid #e6e8ea;">
                          This is text truncate.This is text truncate.
                        </div>
                      </div>
                      <div class="col-md-3">
                        <div class="text-break height-100" style="border:1px solid #e6e8ea;">
                          This-is-text-break.This-is-text-break.This-is-text-break.This-is-text-break.
                        </div>
                      </div>
                      <div class="col-md-3">
                        <div class="text-nowrap height-100" style="border:1px solid #e6e8ea;overflow: hidden;">
                          This is text nowrap.This is text nowrap.
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- End Example Text Wrapping -->
            </div>

            <div class="clearfix visible-lg-block"></div>

            <div class="col-lg-6">
              <!-- Example Text Alignment -->
              <div class="example-wrap">
                <h4 class="example-title">Text Alignment</h4>
                <div class="example-body">
                  <p>Add one of these useful classes to align your text.</p>
                  <table class="table table-bordered table-hover">
                    <colgroup>
                      <col class="col-xs-1">
                        <col class="col-xs-7">
                    </colgroup>
                    <thead>
                      <tr>
                        <th class="text-nowrap">Class</th>
                        <th>Description</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td class="text-nowrap">
                          <code>.text-top</code>
                        </td>
                        <td>Aligns text to the top.</td>
                      </tr>
                      <tr>
                        <td class="text-nowrap">
                          <code>.text-middle</code>
                        </td>
                        <td>Aligns text to the middle.</td>
                      </tr>
                      <tr>
                        <td class="text-nowrap">
                          <code>.text-bottom</code>
                        </td>
                        <td>Aligns text to the bottom.</td>
                      </tr>
                      <tr>
                        <td class="text-nowrap">
                          <code>.text-left</code>
                        </td>
                        <td>Left aligned text.</td>
                      </tr>
                      <tr>
                        <td class="text-nowrap">
                          <code>.text-center</code>
                        </td>
                        <td>Center aligned text.</td>
                      </tr>
                      <tr>
                        <td class="text-nowrap">
                          <code>.text-right</code>
                        </td>
                        <td>Right aligned text.</td>
                      </tr>
                      <tr>
                        <td class="text-nowrap">
                          <code>.text-justify</code>
                        </td>
                        <td>Justified text.</td>
                      </tr>
                    </tbody>
                  </table>

                  <div class="example example-box container-fluid">
                    <div class="row">
                      <div class="col-md-4 margin-bottom-10">
                        <a class="avatar" href="javascript:void(0)">
                          <img class="width-50" src="../../global/portraits/1.jpg" alt="Relevant textual alternative to the image">
                        </a>
                        <span class="text-top">Aligns text to the top.</span>
                      </div>
                      <div class="col-md-4 margin-bottom-10">
                        <a class="avatar" href="javascript:void(0)">
                          <img class="width-50" src="../../global/portraits/2.jpg" alt="Relevant textual alternative to the image">
                        </a>
                        <span class="text-middle">Aligns text to the middle.</span>
                      </div>
                      <div class="col-md-4 margin-bottom-10">
                        <a class="avatar" href="javascript:void(0)">
                          <img class="width-50" src="../../global/portraits/3.jpg" alt="Relevant textual alternative to the image">
                        </a>
                        <span class="text-bottom">Aligns text to the bottom.</span>
                      </div>
                    </div>
                    <div class="margin-top-20">
                      <p class="text-left">Left aligned text.</p>
                      <p class="text-center">Center aligned text.</p>
                      <p class="text-right">Right aligned text.</p>
                      <p class="text-justify">Justified text.Justified text.Justified text.</p>
                    </div>
                  </div>
                </div>
              </div>
              <!-- End Example Text Alignment -->
            </div>

            <div class="col-lg-6">
              <!-- Example Quick Font Size -->
              <div class="example-wrap">
                <h4 class="example-title">Quick Font Size</h4>
                <div class="example-body">
                  <p>Add one of these classes to set the font size.</p>
                  <p>All size: 0, 10, 12, 14, 16, 18, 20, 24, 26, 30, 40, 50, 60,
                    70 , 80.</p>
                  <table class="table table-bordered table-hover">
                    <colgroup>
                      <col class="col-xs-1">
                        <col class="col-xs-7">
                    </colgroup>
                    <thead>
                      <tr>
                        <th class="text-nowrap">Class</th>
                        <th>Description</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td class="text-nowrap"><code>.font-size-0</code></td>
                        <td>font-size: 0px</td>
                      </tr>
                      <tr>
                        <td class="text-nowrap"><code>.font-size-10</code></td>
                        <td>font-size: 10px</td>
                      </tr>
                      <tr>
                        <td class="text-nowrap"><code>.font-size-12</code></td>
                        <td>font-size: 12px</td>
                      </tr>
                      <tr>
                        <td class="text-nowrap"><code>.font-size-14</code></td>
                        <td>font-size: 14px</td>
                      </tr>
                      <tr>
                        <td class="text-nowrap"><code>.font-size-16</code></td>
                        <td>font-size: 16px</td>
                      </tr>
                      <tr>
                        <td class="text-nowrap"><code>.font-size-18</code></td>
                        <td>font-size: 18px</td>
                      </tr>
                      <tr>
                        <td class="text-nowrap"><code>.font-size-20</code></td>
                        <td>font-size: 20px</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <!-- End Example Quick Font Size -->

              <!-- Example Quick Font Weight -->
              <div class="example-wrap">
                <h4 class="example-title">Quick Font Weight</h4>
                <div class="example-body">
                  <p>Add one of these classes to set the font weight.</p>
                  <p>All size: unset, 100, 200, 300, 400, 500, 600, 700, 800, 900.</p>
                  <div class="table-responsive">
                    <table class="table table-bordered table-hover">
                      <colgroup>
                        <col class="col-xs-1">
                          <col class="col-xs-7">
                      </colgroup>
                      <thead>
                        <tr>
                          <th class="text-nowrap">Class</th>
                          <th>Description</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td class="text-nowrap"><code>.font-weight-unset</code></td>
                          <td>font-weight: unset</td>
                        </tr>
                        <tr>
                          <td class="text-nowrap"><code>.font-weight-100</code></td>
                          <td>font-weight: 100</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
              <!-- End Example Quick Font Weight -->
            </div>
          </div>
        </div>
      </div>
      <!-- End Panel Text Related -->

      <!-- Panel Box Modal -->
      <div class="panel">
        <div class="panel-heading">
          <h3 class="panel-title">Box Modal</h3>
        </div>
        <div class="panel-body container-fluid">
          <div class="row row-lg">
            <div class="col-lg-6">
              <!-- Example Quick Padding -->
              <div class="example-wrap">
                <h4 class="example-title">Quick Padding</h4>
                <div class="example-body">
                  <p>All size: 0, 3, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50.</p>
                  <div class="table-responsive">
                    <table class="table table-bordered table-hover">
                      <colgroup>
                        <col class="col-xs-1">
                          <col class="col-xs-7">
                      </colgroup>
                      <thead>
                        <tr>
                          <th class="text-nowrap">CLASS</th>
                          <th>DESCRIPTION</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td class="text-nowrap"><code>.padding-5</code></td>
                          <td>padding: 5px</td>
                        </tr>
                        <tr>
                          <td class="text-nowrap"><code>.padding-vertical-5</code></td>
                          <td>
                            <p>padding-top: 5px</p>
                            <p>padding-bottom: 5px</p>
                          </td>
                        </tr>
                        <tr>
                          <td class="text-nowrap"><code>.padding-horizontal-5</code></td>
                          <td>
                            <p>padding-left: 5px</p>
                            <p>padding-right: 5px</p>
                          </td>
                        </tr>
                        <tr>
                          <td class="text-nowrap"><code>.padding-top-5</code></td>
                          <td>padding-top: 5px</td>
                        </tr>
                        <tr>
                          <td class="text-nowrap"><code>.padding-right-5</code></td>
                          <td>padding-right: 5px</td>
                        </tr>
                        <tr>
                          <td class="text-nowrap"><code>.padding-bottom-5</code></td>
                          <td>padding-bottom: 5px</td>
                        </tr>
                        <tr>
                          <td class="text-nowrap"><code>.padding-left-5</code></td>
                          <td>padding-left: 5px</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
              <!-- End Example Quick Padding -->
            </div>

            <div class="col-lg-6">
              <!-- Example Quick Margin -->
              <div class="example-wrap">
                <h4 class="example-title">Quick Margin</h4>
                <div class="example-body">
                  <p>All size: 0, 3, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50.</p>
                  <div class="table-responsive">
                    <table class="table table-bordered table-hover">
                      <colgroup>
                        <col class="col-xs-1">
                          <col class="col-xs-7">
                      </colgroup>
                      <thead>
                        <tr>
                          <th class="text-nowrap">CLASS</th>
                          <th>DESCRIPTION</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td class="text-nowrap"><code>.margin-5</code></td>
                          <td>margin: 5px</td>
                        </tr>
                        <tr>
                          <td class="text-nowrap"><code>.margin-vertical-5</code></td>
                          <td>
                            <p>margin-top: 5px</p>
                            <p>margin-bottom: 5px</p>
                          </td>
                        </tr>
                        <tr>
                          <td class="text-nowrap"><code>.margin-horizontal-5</code></td>
                          <td>
                            <p>margin-left: 5px</p>
                            <p>margin-right: 5px</p>
                          </td>
                        </tr>
                        <tr>
                          <td class="text-nowrap"><code>.margin-top-5</code></td>
                          <td>margin-top: 5px</td>
                        </tr>
                        <tr>
                          <td class="text-nowrap"><code>.margin-right-5</code></td>
                          <td>margin-right: 5px</td>
                        </tr>
                        <tr>
                          <td class="text-nowrap"><code>.margin-bottom-5</code></td>
                          <td>margin-bottom: 5px</td>
                        </tr>
                        <tr>
                          <td class="text-nowrap"><code>.margin-left-5</code></td>
                          <td>margin-left: 5px</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
              <!-- End Example Quick Margin -->
            </div>

            <div class="col-lg-6">
              <!-- Example Quick Height -->
              <div class="example-wrap">
                <h4 class="example-title">Quick Height</h4>
                <div class="example-body">
                  <p>All size: 50, 100, 150, 200, 250, 300, 350, 400, 450, 500.</p>
                  <table class="table table-bordered table-hover">
                    <colgroup>
                      <col class="col-xs-1">
                        <col class="col-xs-7">
                    </colgroup>
                    <thead>
                      <tr>
                        <th class="text-nowrap">Class</th>
                        <th>DESCRIPTION</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td class="text-nowrap"><code>.height-50</code></td>
                        <td>height: 50px</td>
                      </tr>
                      <tr>
                        <td class="text-nowrap"><code>.height-100</code></td>
                        <td>height: 100px</td>
                      </tr>
                      <tr>
                        <td class="text-nowrap"><code>.height-150</code></td>
                        <td>height: 150px</td>
                      </tr>
                      <tr>
                        <td class="text-nowrap"><code>.height-200</code></td>
                        <td>height: 200px</td>
                      </tr>
                      <tr>
                        <td class="text-nowrap"><code>.height-250</code></td>
                        <td>height: 250px</td>
                      </tr>
                      <tr>
                        <td class="text-nowrap"><code>.height-300</code></td>
                        <td>height: 300px</td>
                      </tr>
                      <tr>
                        <td class="text-nowrap"><code>.height-350</code></td>
                        <td>height: 350px</td>
                      </tr>
                      <tr>
                        <td class="text-nowrap"><code>.height-400</code></td>
                        <td>height: 400px</td>
                      </tr>
                      <tr>
                        <td class="text-nowrap"><code>.height-450</code></td>
                        <td>height: 450px</td>
                      </tr>
                      <tr>
                        <td class="text-nowrap"><code>.height-500</code></td>
                        <td>height: 500px</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <!-- End Example Quick Height -->
            </div>

            <div class="col-lg-6">
              <!-- Example Quick Width -->
              <div class="example-wrap">
                <h4 class="example-title">Quick Width</h4>
                <div class="example-body">
                  <p>All size: 50, 100, 150, 200, 250, 300, 350, 400, 450, 500.</p>
                  <table class="table table-bordered table-hover">
                    <colgroup>
                      <col class="col-xs-1">
                        <col class="col-xs-7">
                    </colgroup>
                    <thead>
                      <tr>
                        <th class="text-nowrap">Class</th>
                        <th>DESCRIPTION</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td class="text-nowrap"><code>.width-50</code></td>
                        <td>width: 50px</td>
                      </tr>
                      <tr>
                        <td class="text-nowrap"><code>.width-100</code></td>
                        <td>width: 100px</td>
                      </tr>
                      <tr>
                        <td class="text-nowrap"><code>.width-150</code></td>
                        <td>width: 150px</td>
                      </tr>
                      <tr>
                        <td class="text-nowrap"><code>.width-200</code></td>
                        <td>width: 200px</td>
                      </tr>
                      <tr>
                        <td class="text-nowrap"><code>.width-250</code></td>
                        <td>width: 250px</td>
                      </tr>
                      <tr>
                        <td class="text-nowrap"><code>.width-300</code></td>
                        <td>width: 300px</td>
                      </tr>
                      <tr>
                        <td class="text-nowrap"><code>.width-350</code></td>
                        <td>width: 350px</td>
                      </tr>
                      <tr>
                        <td class="text-nowrap"><code>.width-400</code></td>
                        <td>width: 400px</td>
                      </tr>
                      <tr>
                        <td class="text-nowrap"><code>.width-450</code></td>
                        <td>width: 450px</td>
                      </tr>
                      <tr>
                        <td class="text-nowrap"><code>.width-500</code></td>
                        <td>width: 500px</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <!-- End Example Quick Width -->
            </div>

            <div class="col-lg-12">
              <!-- Example Responsive Height -->
              <div class="example-wrap">
                <h4 class="example-title">Responsive Height</h4>
                <div class="example-body table-responsive">
                  <table class="tablesaw table-bordered table-hover visiblity-utilities" data-tablesaw-mode="swipe"
                  data-tablesaw-minimap>
                    <thead>
                      <tr>
                        <th data-tablesaw-priority="persist"></th>
                        <th>
                          Extra small devices
                          <small>Phones (&lt;768px)</small>
                        </th>
                        <th>
                          Small devices
                          <small>Tablets (≥768px)</small>
                        </th>
                        <th>
                          Medium devices
                          <small>Desktops (≥992px)</small>
                        </th>
                        <th>
                          Large devices
                          <small>Desktops (≥1200px)</small>
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <th>50px</th>
                        <td class="text-nowrap"><code>.height-xs-50</code></td>
                        <td class="text-nowrap"><code>.height-sm-50</code></td>
                        <td class="text-nowrap"><code>.height-md-50</code></td>
                        <td class="text-nowrap"><code>.height-lg-50</code></td>
                      </tr>
                      <tr>
                        <th>100px</th>
                        <td class="text-nowrap"><code>.height-xs-100</code></td>
                        <td class="text-nowrap"><code>.height-sm-100</code></td>
                        <td class="text-nowrap"><code>.height-md-100</code></td>
                        <td class="text-nowrap"><code>.height-lg-100</code></td>
                      </tr>
                      <tr>
                        <th>150px</th>
                        <td class="text-nowrap"><code>.height-xs-150</code></td>
                        <td class="text-nowrap"><code>.height-sm-150</code></td>
                        <td class="text-nowrap"><code>.height-md-150</code></td>
                        <td class="text-nowrap"><code>.height-lg-150</code></td>
                      </tr>
                      <tr>
                        <th>200px</th>
                        <td class="text-nowrap"><code>.height-xs-200</code></td>
                        <td class="text-nowrap"><code>.height-sm-200</code></td>
                        <td class="text-nowrap"><code>.height-md-200</code></td>
                        <td class="text-nowrap"><code>.height-lg-200</code></td>
                      </tr>
                      <tr>
                        <th>250px</th>
                        <td class="text-nowrap"><code>.height-xs-250</code></td>
                        <td class="text-nowrap"><code>.height-sm-250</code></td>
                        <td class="text-nowrap"><code>.height-md-250</code></td>
                        <td class="text-nowrap"><code>.height-lg-250</code></td>
                      </tr>
                      <tr>
                        <th>300px</th>
                        <td class="text-nowrap"><code>.height-xs-300</code></td>
                        <td class="text-nowrap"><code>.height-sm-300</code></td>
                        <td class="text-nowrap"><code>.height-md-300</code></td>
                        <td class="text-nowrap"><code>.height-lg-300</code></td>
                      </tr>
                    </tbody>
                    <tbody>
                      <tr>
                        <th>350px</th>
                        <td class="text-nowrap"><code>.height-xs-350</code></td>
                        <td class="text-nowrap"><code>.height-sm-350</code></td>
                        <td class="text-nowrap"><code>.height-md-350</code></td>
                        <td class="text-nowrap"><code>.height-lg-350</code></td>
                      </tr>
                      <tr>
                        <th>400px</th>
                        <td class="text-nowrap"><code>.height-xs-400</code></td>
                        <td class="text-nowrap"><code>.height-sm-400</code></td>
                        <td class="text-nowrap"><code>.height-md-400</code></td>
                        <td class="text-nowrap"><code>.height-lg-400</code></td>
                      </tr>
                      <tr>
                        <th>450px</th>
                        <td class="text-nowrap"><code>.height-xs-450</code></td>
                        <td class="text-nowrap"><code>.height-sm-450</code></td>
                        <td class="text-nowrap"><code>.height-md-450</code></td>
                        <td class="text-nowrap"><code>.height-lg-450</code></td>
                      </tr>
                      <tr>
                        <th>500px</th>
                        <td class="text-nowrap"><code>.height-xs-500</code></td>
                        <td class="text-nowrap"><code>.height-sm-500</code></td>
                        <td class="text-nowrap"><code>.height-md-500</code></td>
                        <td class="text-nowrap"><code>.height-lg-500</code></td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <!-- End Example Responsive Height -->
            </div>
          </div>
        </div>
      </div>
      <!-- End Panel Box Modal -->

      <!-- Panel Miscellaneous -->
      <div class="panel">
        <div class="panel-heading">
          <h3 class="panel-title">Miscellaneous</h3>
        </div>
        <div class="panel-body container-fluid">
          <div class="row row-lg">
            <div class="col-lg-6">
              <!-- Example Quick Grid With No Space -->
              <div class="example-wrap">
                <h4 class="example-title">Quick Grid With No Space</h4>
                <div class="example-body">
                  <p>
                    <code>.row</code> with <code>.no-space</code> to set the columns
                    which directly under no space.
                  </p>
                  <div class="example container-fluid">
                    <div class="row no-space text-center">
                      <div class="col-xs-3" style="border: 1px solid #ddd">col-3</div>
                      <div class="col-xs-3" style="border: 1px solid #ddd">col-3</div>
                      <div class="col-xs-3" style="border: 1px solid #ddd">col-3</div>
                      <div class="col-xs-3" style="border: 1px solid #ddd">col-3</div>
                    </div>
                    <div class="row no-space text-center margin-top-10">
                      <div class="col-xs-6" style="border: 1px solid #ddd">col-6</div>
                      <div class="col-xs-6" style="border: 1px solid #ddd">col-6</div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- End Example Quick Grid With No Space -->
            </div>

            <div class="col-lg-6">
              <!-- Example Display Utilities -->
              <div class="example-wrap">
                <h4 class="example-title">Display Utilities</h4>
                <div class="example-body">
                  <p>Add one of these classes to change the display properties of
                    an element.</p>
                  <table class="table table-bordered table-hover">
                    <colgroup>
                      <col class="col-xs-1">
                        <col class="col-xs-7">
                    </colgroup>
                    <thead>
                      <tr>
                        <th class="text-nowrap">Class</th>
                        <th>Description</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td class="text-nowrap"><code>.inline</code></td>
                        <td>Forces the element to behave like an inline element.</td>
                      </tr>
                      <tr>
                        <td class="text-nowrap"><code>.inline-block</code></td>
                        <td>Forces the element to behave like an inline-block element.</td>
                      </tr>
                      <tr>
                        <td class="text-nowrap"><code>.block</code></td>
                        <td>Forces the element to behave like a block element.</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <!-- End Example Display Utilities -->
            </div>
            <div class="clearfix visible-lg-block"></div>

            <div class="col-lg-6">
              <!-- Example Screen Reader And Keyboard Navigation Content -->
              <div class="example-wrap">
                <h4 class="example-title">Screen Reader And Keyboard Navigation Content</h4>
                <div class="example-body">
                  <p>Hide an element to all devices
                    <strong>except screen readers</strong> with <code>.sr-only</code>.
                    Combine <code>.sr-only</code> with <code>.sr-only-focusable</code>                    to show the element again when it's focused (e.g. by a keyboard-only
                    user). Can also be used as mixins.</p>
                </div>
              </div>
              <!-- End Example Screen Reader And Keyboard Navigation Content -->
            </div>

            <div class="col-lg-6">
              <!-- Example Carets -->
              <div class="example-wrap">
                <h4 class="example-title">Carets</h4>
                <div class="example-body">
                  <p>Use carets to indicate dropdown functionality and direction.
                    Note that the default caret will reverse automatically in
                    <a
                    href="./dropdowns.html">dropup menus</a>.</p>
                  <div class="example example-box">
                    <span class="caret"></span>
                  </div>
                </div>
              </div>
              <!-- End Example Carets -->
            </div>

            <div class="clearfix visible-lg-block"></div>

            <div class="col-lg-12">
              <!-- Example Visibility -->
              <div class="example-wrap">
                <h4 class="example-title">Visibility</h4>
                <div class="example-body table-responsive">
                  <table class="tablesaw table-bordered table-hover visiblity-utilities" data-tablesaw-mode="swipe"
                  data-tablesaw-minimap>
                    <thead>
                      <tr>
                        <th data-tablesaw-priority="persist"></th>
                        <th>
                          Extra small devices
                          <small>Phones (&lt;768px)</small>
                        </th>
                        <th>
                          Small devices
                          <small>Tablets (≥768px)</small>
                        </th>
                        <th>
                          Medium devices
                          <small>Desktops (≥992px)</small>
                        </th>
                        <th>
                          Large devices
                          <small>Desktops (≥1200px)</small>
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <th class="text-nowrap"><code>.show</code></th>
                        <td class="is-visible">Visible</td>
                        <td class="is-visible">Visible</td>
                        <td class="is-visible">Visible</td>
                        <td class="is-visible">Visible</td>
                      </tr>
                      <tr>
                        <th class="text-nowrap"><code>.hide</code></th>
                        <td class="is-hidden">Hidden</td>
                        <td class="is-hidden">Hidden</td>
                        <td class="is-hidden">Hidden</td>
                        <td class="is-hidden">Hidden</td>
                      </tr>
                      <tr>
                        <th class="text-nowrap"><code>.visible-xs-*</code></th>
                        <td class="is-visible">Visible</td>
                        <td class="is-hidden">Hidden</td>
                        <td class="is-hidden">Hidden</td>
                        <td class="is-hidden">Hidden</td>
                      </tr>
                      <tr>
                        <th class="text-nowrap"><code>.visible-sm-*</code></th>
                        <td class="is-hidden">Hidden</td>
                        <td class="is-visible">Visible</td>
                        <td class="is-hidden">Hidden</td>
                        <td class="is-hidden">Hidden</td>
                      </tr>
                      <tr>
                        <th class="text-nowrap"><code>.visible-md-*</code></th>
                        <td class="is-hidden">Hidden</td>
                        <td class="is-hidden">Hidden</td>
                        <td class="is-visible">Visible</td>
                        <td class="is-hidden">Hidden</td>
                      </tr>
                      <tr>
                        <th class="text-nowrap"><code>.visible-lg-*</code></th>
                        <td class="is-hidden">Hidden</td>
                        <td class="is-hidden">Hidden</td>
                        <td class="is-hidden">Hidden</td>
                        <td class="is-visible">Visible</td>
                      </tr>
                    </tbody>
                    <tbody>
                      <tr>
                        <th class="text-nowrap"><code>.hidden-xs</code></th>
                        <td class="is-hidden">Hidden</td>
                        <td class="is-visible">Visible</td>
                        <td class="is-visible">Visible</td>
                        <td class="is-visible">Visible</td>
                      </tr>
                      <tr>
                        <th class="text-nowrap"><code>.hidden-sm</code></th>
                        <td class="is-visible">Visible</td>
                        <td class="is-hidden">Hidden</td>
                        <td class="is-visible">Visible</td>
                        <td class="is-visible">Visible</td>
                      </tr>
                      <tr>
                        <th class="text-nowrap"><code>.hidden-md</code></th>
                        <td class="is-visible">Visible</td>
                        <td class="is-visible">Visible</td>
                        <td class="is-hidden">Hidden</td>
                        <td class="is-visible">Visible</td>
                      </tr>
                      <tr>
                        <th class="text-nowrap"><code>.hidden-lg</code></th>
                        <td class="is-visible">Visible</td>
                        <td class="is-visible">Visible</td>
                        <td class="is-visible">Visible</td>
                        <td class="is-hidden">Hidden</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <!-- End Example Visibility -->
            </div>


          </div>
        </div>
      </div>
      <!-- End Panel Miscellaneous -->
    </div>
  </div>
  <!-- End Page -->


  <!-- Footer -->
  <footer class="site-footer">
    <div class="site-footer-legal">© 2016 <a href="http://themeforest.net/item/remark-responsive-bootstrap-admin-template/11989202">Remark</a></div>
    <div class="site-footer-right">
      Crafted with <i class="red-600 wb wb-heart"></i> by <a href="http://themeforest.net/user/amazingSurge">amazingSurge</a>
    </div>
  </footer>
  <!-- Core  -->
  <script src="../../global/vendor/jquery/jquery.min.js"></script>
  <script src="../../global/vendor/bootstrap/bootstrap.min.js"></script>
  <script src="../../global/vendor/animsition/animsition.min.js"></script>
  <script src="../../global/vendor/asscroll/jquery-asScroll.min.js"></script>
  <script src="../../global/vendor/mousewheel/jquery.mousewheel.min.js"></script>
  <script src="../../global/vendor/asscrollable/jquery.asScrollable.all.min.js"></script>
  <script src="../../global/vendor/ashoverscroll/jquery-asHoverScroll.min.js"></script>

  <!-- Plugins -->
  <script src="../../global/vendor/switchery/switchery.min.js"></script>
  <script src="../../global/vendor/intro-js/intro.min.js"></script>
  <script src="../../global/vendor/screenfull/screenfull.min.js"></script>
  <script src="../../global/vendor/slidepanel/jquery-slidePanel.min.js"></script>

  <!-- Plugins For This Page -->
  <script src="../../global/vendor/filament-tablesaw/tablesaw.js"></script>

  <!-- Scripts -->
  <script src="../../global/js/core.min.js"></script>
  <script src="../assets/js/site.min.js"></script>

  <script src="../assets/js/sections/menu.min.js"></script>
  <script src="../assets/js/sections/menubar.min.js"></script>
  <script src="../assets/js/sections/gridmenu.min.js"></script>
  <script src="../assets/js/sections/sidebar.min.js"></script>

  <script src="../../global/js/configs/config-colors.min.js"></script>
  <script src="../assets/js/configs/config-tour.min.js"></script>

  <script src="../../global/js/components/asscrollable.min.js"></script>
  <script src="../../global/js/components/animsition.min.js"></script>
  <script src="../../global/js/components/slidepanel.min.js"></script>
  <script src="../../global/js/components/switchery.min.js"></script>


  <script>
    (function(document, window, $) {
      'use strict';

      var Site = window.Site;
      $(document).ready(function() {
        Site.run();
      });
    })(document, window, jQuery);
  </script>



</body>

</html>